<template>
  <div style="position: relative">
    <div style="position: absolute; top:10px; right: 10px; z-index: 10" >

      <el-button type="primary" icon="Delete" circle @click="removeMarker"/>
    </div>
    <div id="container-point" :style="{width,height}">

    </div>
  </div>

</template>

<script>

export default {
  name: 'GaodeMapPoint',
  props: {
    modelValue: {
      type: String,
      default: undefined
    },
    // 打点图标
    icon: {
      type: String,
      default: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
    },
    // 地图层级
    zoom: {
      type: Number,
      default: 15
    },
    // 地图中心点
    center: {
      type: Array,
      default: () => {
        return [108.94878, 34.22259]
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '790px'
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      map: null, // 初始化 gMap 对象,
      markersPosition: [108.94878, 34.22259],
      markers: [],
      marker: null,
      emitting: false

    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(val) {
        if (this.emitting) {
          return
        }
        console.log(val, 'val')
        // if (val) {
        //   this.location = JSON.parse(val)
        // } else {
        //   this.point = {}
        //   this.location = []
        // }
        if (val) {
          this.markersPosition = JSON.parse(val)
          this.$nextTick(() => {
            this.setMapMarker()
          })
        }

        // this.centerLocation = this.location
      }
    }
  },
  mounted() {
    // DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods: {

    // 删除之前后的标记点
    removeMarker () {
      if (this.marker) {
        this.map.remove(this.marker)
      }
    },
    handlerMapClick() {
      this.map.on('click', (e) => {
        this.emitting = true
        this.markersPosition = [e.lnglat.lng, e.lnglat.lat]
        this.$emit('update:modelValue', JSON.stringify(this.markersPosition))

        this.removeMarker()
        this.setMapMarker()
        this.$nextTick(() => {
          this.emitting = false
        })
      })
    },

    setMapMarker () {
      const markerContent = `<div class="custom-content-marker" >
<img src="${this.icon}" style="height: 25px;width: 25px">
</div>`
      this.marker = new this.$AMap.Marker({
        map: this.map,
        content: markerContent,
        doubleClickZoom: false, // 禁用双击缩放功能
        position: this.markersPosition
        // offset: new this.$AMap.Pixel(-20, -40)
        // size: new this.$AMap.Size(30, 35) // 图标的大小，单位为像素
      })
      // marker.setMap(this.maps)
    },

    initMap() {
      this.map = new this.$AMap.Map('container-point', { // 设置地图容器id
        viewMode: '2D', // 是否为3D地图模式
        zoom: this.zoom, // 初始化地图级别
        center: this.center // 初始化地图中心点位置
      })
      this.$AMap.plugin(['AMap.ToolBar'], (ToolBar) => {
        this.map.addControl(new this.$AMap.ToolBar())
        this.map.addControl(new this.$AMap.ControlBar({
          position: {
            right: '20px',
            top: '50px'
          },
          showControlButton: true // 是否显示倾斜、旋转按钮。默认为 true
        }))
      })
      this.handlerMapClick()
    }

  }
}
</script>

<style scoped lang="scss">
#container-point {
  width: 100%;
  height: 790px;
  //margin: 100px auto;
  //border: 1px solid red;
}

</style>
